<UserControl
  x:Class="Kaxaml.CodeCompletion.StringBox"
  x:Name="This"
  xmlns:a="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
  xmlns:c="clr-namespace:Kaxaml.Controls"
  xmlns:cc="clr-namespace:Kaxaml.CodeCompletion"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <UserControl.Resources>
    
    <Style TargetType="{x:Type ContentControl}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type ContentControl}">
            <Border Background="Transparent" CornerRadius="5">
              <ContentPresenter />
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

    <Storyboard x:Key="ShowScrollText">
      <DoubleAnimation Storyboard.TargetName="ScrollTextBorder" Storyboard.TargetProperty="Opacity" Duration="0:0:0.1" To="1" />
    </Storyboard>

    <Storyboard x:Key="HideScrollText">
      <DoubleAnimation Storyboard.TargetName="ScrollTextBorder" Storyboard.TargetProperty="Opacity" Duration="0:0:0.1" To="0" />
    </Storyboard>

    <Style x:Key="SuperSimpleVerticalSlider" TargetType="{x:Type Slider}">
      <Setter Property="Width" Value="20" />
      <Setter Property="OverridesDefaultStyle" Value="True" />
      <Setter Property="SnapsToDevicePixels" Value="True" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type Slider}">
            <Border Background="Transparent">
              <Track Name="PART_Track"  >
                <Track.DecreaseRepeatButton>
                  <RepeatButton Command="Slider.DecreaseLarge">
                    <RepeatButton.Template>
                      <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border Background="Transparent"/>
                      </ControlTemplate>
                    </RepeatButton.Template>
                  </RepeatButton>
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                  <Thumb  x:Name="Bd" Opacity="0.25" >
                    <Thumb.Template>
                      <ControlTemplate>
                        <Border  Background="Transparent">
                          <Border Height="40" Width="6" CornerRadius="3">
                            <Border.Background>
                              <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"  >
                                <GradientStop Offset="0" Color="#BFFF" />
                                <GradientStop Offset="1" Color="#EFFF" />
                              </LinearGradientBrush>
                            </Border.Background>
                          </Border>
                        </Border>
                      </ControlTemplate>
                    </Thumb.Template>
                  </Thumb>
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                  <RepeatButton Command="Slider.IncreaseLarge">
                    <RepeatButton.Template>
                      <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Border Background="Transparent" />
                      </ControlTemplate>
                    </RepeatButton.Template>
                  </RepeatButton>
                </Track.IncreaseRepeatButton>
              </Track>
            </Border>
            <ControlTemplate.Triggers>
              <Trigger  Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                  <BeginStoryboard>
                    <Storyboard>
                      <DoubleAnimation Storyboard.TargetName="Bd" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
                    </Storyboard>
                  </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                  <BeginStoryboard>
                    <Storyboard>
                      <DoubleAnimation Storyboard.TargetName="Bd" Storyboard.TargetProperty="Opacity" Duration="0:0:0.4" />
                    </Storyboard>
                  </BeginStoryboard>
                </Trigger.ExitActions>
              </Trigger>

            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>


  </UserControl.Resources>
  <Grid>
    <cc:ContentItemsControl ItemsSource="{Binding ElementName=This, Path=StringHostItems}">
      <cc:ContentItemsControl.Template>
        <ControlTemplate TargetType="{x:Type ItemsControl}">
          <c:IndexingStackPanel IsItemsHost="True" />
        </ControlTemplate>
      </cc:ContentItemsControl.Template>
      <cc:ContentItemsControl.ItemContainerStyle>
        <Style TargetType="{x:Type ContentControl}">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type ContentControl}">
                <Border
                  x:Name="Border"
                  Background="Transparent"
                  CornerRadius="0"
                  Width="200"
                  BorderThickness="0,1"
                  Height="21"
                  MouseDown="ItemMouseDown"
                  MouseUp="ItemMouseUp"
                  MouseEnter="ItemMouseEnter"
                  MouseLeave="ItemMouseLeave">
                  <Grid>
                    <ContentPresenter />
                  </Grid>
                </Border>
                <ControlTemplate.Triggers>
                  <DataTrigger Binding="{Binding IsSelected}" Value="True">
                    <Setter TargetName="Border" Property="Background">
                      <Setter.Value>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">



                          <GradientStop Offset="0.0" Color="#909090" />
                          <GradientStop Offset="1.0" Color="#505050" />

                          <!--<GradientStop Color="#FFA8CDF1" Offset="0"/>
                          <GradientStop Color="#FF5E85A4" Offset="1"/>-->

                          <!--
                          <GradientStop Offset="0" Color="#FFE98138" />
                          <GradientStop Offset="0.75" Color="#FFD35A05" />
                          <GradientStop Offset="1" Color="#FFD35A05" />
                          -->
                        </LinearGradientBrush>
                      </Setter.Value>
                    </Setter>
                    <Setter TargetName="Border" Property="BorderBrush">
                      <Setter.Value>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                          <GradientStop Color="#B0B0B0" Offset="0"/>
                          <GradientStop Color="#303030" Offset="1"/>
                          <!--
                          <GradientStop Offset="0" Color="#FFFFAF35" />
                          <GradientStop Offset="1" Color="#B0242B30" />
                          -->
                        </LinearGradientBrush>
                      </Setter.Value>
                    </Setter>
                    <Setter TargetName="Border"  Property="TextElement.Foreground" Value="#FFF" />
                  </DataTrigger>
                  <Trigger Property="c:IndexingStackPanel.StackLocation" Value="First">
                    <Setter TargetName="Border" Property="CornerRadius" Value="4,4,0,0" />
                  </Trigger>
                  <Trigger Property="c:IndexingStackPanel.StackLocation" Value="Last">
                    <Setter TargetName="Border" Property="CornerRadius" Value="0,0,4,4" />
                  </Trigger>
                </ControlTemplate.Triggers>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </cc:ContentItemsControl.ItemContainerStyle>
      <cc:ContentItemsControl.ItemTemplate>
        <DataTemplate>
          <Border
            ToolTip="{Binding Tooltip}"  
            Margin="5,0,0,0"
            Background="Transparent" 
            VerticalAlignment="Center">
            <!--Image x:Name="Icon" Width="16" Height="16" / -->
            <TextBlock
              Width="170" 
              Text="{Binding Value}"
              VerticalAlignment="Center"
              HorizontalAlignment="Left"
              Margin="15,0,0,2"
              TextTrimming="CharacterEllipsis" />
          </Border>
        </DataTemplate>

      </cc:ContentItemsControl.ItemTemplate>
    </cc:ContentItemsControl>
    
    <Slider 
      Margin="0,6" 
      x:Name="ScrollerSlider" 
      Style="{StaticResource SuperSimpleVerticalSlider}" 
      HorizontalAlignment="Right"
      Orientation="Vertical"
      IsDirectionReversed="True"
      ValueChanged="SliderValueChanged" />

    <Border x:Name="ScrollTextBorder" VerticalAlignment="Center" HorizontalAlignment="Center" CornerRadius="4" Width="40" Height="40" IsHitTestVisible="False" SnapsToDevicePixels="True" Opacity="0">
      <Border.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
          <GradientStop Offset="0" Color="#8000" />
          <GradientStop Offset="1" Color="#5000" />
        </LinearGradientBrush>
      </Border.Background>
      
      <TextBlock Foreground="White" x:Name="ScrollText"  FontSize="30" VerticalAlignment="Center" HorizontalAlignment="Center" Text="" Margin="0,0,0,4" />
      
    </Border>


  </Grid>
</UserControl>
